<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item v-if="isAdmin">
          <el-input v-model="formInline.projectName" clearable placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item v-if="isAdmin">
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
        <!-- <el-form-item v-if="!showBtn"> -->
        <el-form-item v-if="!isAdmin">
          <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">项目管理</div>
      <!-- 表格 -->
      <div class="listfile" :style="{ overflow: 'auto', minHeight: tableHeight }">
        <div class="project_item" v-for="(item, index) in tableData" :key="index" @click="lookDetail(item)">
          <el-row >
            <el-col :span="14"> 
              <div class="info"> 项目名称：{{item.projectName}}</div>
              <div class="info"> 创建时间：{{item.createTime}}</div>
              <div class="info"> {{item.projectExplain && item.projectExplain.split(';')[0]}}</div>
              <div class="info"> {{item.projectExplain && item.projectExplain.split(';')[1]}}</div>
              <div class="info"> 备注：{{item.projectAddrInfo}}</div>
            </el-col>
            <el-col :span="10" style="text-align: right">
              <div class="photo">
                <div class="title"> 项目图片     </div>
                <img v-if="item.projectPicture" :src="item.projectPicture" alt="">
                <img v-else src="../../assets/imgs/prodefault.jpg" alt="">
              </div>
              <!-- <div class="photo">
                <div class="title"> 项目图片 </div>
                <img :src="item.projectPicture" alt="">
              </div> -->
              <div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page" v-if="isAdmin">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

    <!-- 子组件 -->
    <projectModal ref="projectModal1" @submit="submitAddChange" :historyData='addEdit_data'></projectModal>
  </div>
</template>

<script>
import projectModal from "./projectModal"
import { getProjectList, projectSearch, addProject, addProjectCustom } from '@/api/project'
import { loadCustomerProList } from '@/api/myProject'
  export default {
    components: {projectModal},
    data() {
      return {
        isAdmin: this.$store.state.user.roles.includes('admin'),
        showBtn: false,
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        statusArry:[
          {
            value: '0',
            lable: '正常'
          },
          {
            value: '1',
            lable: '停用'
          },
        ],
        tableData: [],
        formInline: {
          projectName: ''
        }
      }
    },
    methods: {
      // 新增--保存后，子传给父组件
      submitAddChange (data) {
        // this.loadListData(); // 条件查询
        if (this.$store.state.user.roles.includes('admin')){
          // admin 
          addProject(data).then(res => {
            if(res.statusCode == '200'){
              this.$message.success(`项目添加成功`)
              this.currentPage = 1
              this.loadData()
            }else {
              this.$message.error(`项目添加失败！`)
            }
          }).catch()
        } else{
          // 用户和用户的用户
          addProjectCustom(data).then(res => {
            if(res.statusCode == '200'){
              this.$message.success(`项目添加成功`)
              this.currentPage = 1
              this.loadData()
            }else {
              this.$message.error(`项目添加失败！`)
            }
          }).catch()
        }
      },
      //添加
      add(){
        this.$refs.projectModal1.searchProvince(); //查询
        this.$refs.projectModal1.modal1 = true;
        this.$refs.projectModal1.title_name = '添加项目';
      },
      //用户查询
      search() {
        this.currentPage = 1
        this.loadData()
        // if(! this.formInline.projectName) return
        // projectSearch({
        //   projectName: this.formInline.projectName// '枞阳水库',
        // }).then(res => {
        //   this.tableData = res.data.content;
        //   this.totalCount = res.data.total
        // }).catch()
      },
      //编辑
      handleEdit(index, row) {
        this.$refs.projectModal1.searchProvince(); //查询
        this.addEdit_data = JSON.parse(JSON.stringify(row));
        this.$refs.projectModal1.modal1 = true;
        this.$refs.projectModal1.title_name = '编辑项目';
        // console.log("编辑:", index, row, this.addEdit_data);
      },
      // 删除
      handleDelete(index, row){

      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.loadData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        this.loadData()
      },
      loadData(){
        if(this.formInline.projectName) {
          projectSearch({
            projectName: this.formInline.projectName,
            pageNum: this.currentPage,
            pageSize: this.pageSize
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total
          }).catch()
        } else {
          if(this.$store.state.user.roles.includes('custom')) {
            loadCustomerProList({
              userId: this.$store.state.user.id,
              userName: this.$store.state.user.account,
            }).then(res => {
              this.tableData = res.data.content;
              this.totalCount = res.data.total;
            })
          } else {
            getProjectList({
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }).then(res => {
              this.tableData = res.data.content;
              this.totalCount = res.data.total;
            }).catch()
          }
        }
      },
      lookDetail(data){
        sessionStorage.setItem("projectsAdmin", JSON.stringify(data))
        let id = this.isAdmin ? data.id: data.projectId
        this.$router.push(`/project/projectAdmin/${id}/${data.projectName}`)
      }
    },
    created(){
      this.loadData()
      if (this.$store.state.user.userInfo.status === 0 && this.$store.state.user.userInfo.statusinfo === "管理员"){
        this.showBtn = true
      }
    },
    mounted(){
      this.loading = false;
    },
    destroyed() {
      this.$destroy();
      this.historyData = [];
      this.page_Data = [];
    },
    watch: {
      formInline: {
        handler: function(val){
          if(val.projectName) {

          } else {
            this.currentPage = 1
            this.loadData()
          }
        },
        deep: true
      }
    }
  }
</script>
<style scoped lang="scss">
.tb_title{
  z-index: 4000 !important;
  height: 50px;
}
.listfile::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.listfile::-webkit-scrollbar-thumb {
  background-color:  #fff;
  /* #141F3B; */
  border-radius: 10px;
}
.project_item {
  padding: 26px 20px;
  height: 210px;
  font-size: 16px;
  color: #fff;
  &:nth-child(2n-1) {
    background: #142E4F;
    // border: 1px solid #20BCFC;

  }
  .title {
    color: #1EB0FC;
    font-family: SourceHanSansCN-Medium;
    margin-bottom: 10px;
  }
  .info {
    height: 32px;
  }
  .photo {
    display: inline-block;
    height: 100%;
    text-align: center;
    margin-left: 20px;
  }
  img {
    width: 246px;
    height: 130px;
    border-radius: 3px;
  }
}

</style>